<template>
    <var-dialog
        title="修改手机号"
        v-model:show="dialogVisible"
        dialog-class="m-update-phone-dialog"
        confirm-button-text="修改"
        cancel-button-text="关闭"
        cancel-button-text-color="#666"
        @before-close="onBeforeClose"
    >
        <div class="cell">
            <el-input
                type="text"
                size="large"
                v-model="form.old_mobile"
                placeholder="请输入旧手机号"
            ></el-input>
        </div>
        <div class="cell">
            <el-input
                type="password"
                size="large"
                v-model="form.password"
                placeholder="请输入登录密码"
            ></el-input>
        </div>
        <div class="cell">
            <el-input
                type="text"
                size="large"
                v-model="form.new_mobile"
                placeholder="请输入新手机号"
            ></el-input>
        </div>
        <div class="cell">
            <el-input
                type="text"
                size="large"
                v-model="form.code"
                placeholder="请输入验证码"
            >
                <template #append>
                    <el-button @click="onSendCode">{{ codeText }}</el-button>
                </template>
            </el-input>
        </div>
    </var-dialog>
</template>
<script setup>
import { useContent } from ".";
const { dialogVisible, form, codeText, onSendCode, onSubmit } = useContent();

const onBeforeClose = async (action, done) => {
    if (action === "confirm") {
        await onSubmit(done);
    } else {
        done();
    }
};

defineExpose({
    show: () => (dialogVisible.value = true),
});
</script>
<style lang="scss" scoped>
.m-update-phone-dialog {
    .cell {
        margin-bottom: 15px;

        &:last-of-type {
            margin-bottom: 0;
        }

        .el-input {
            height: 32px;
        }
    }

    .form-bottom {
        display: flex;
        margin-top: 10px;

        .text-btn {
            display: inline-block;
            color: #5185fb;
            font-size: 14px;
            cursor: pointer;
            user-select: none;

            &.to-login {
                margin-left: auto;
            }
        }
    }

    .btn {
        width: 100%;
        outline: none;
        border: none;
        background-color: #5185fb;
        color: #fff;
        font-size: 18px;
        height: 40px;
        border-radius: 4px;
        cursor: pointer;
    }
}
</style>
